<template>
  <div>
    <!-- 头部区域 -->
    <el-header>
      <p>万事达-TMS客户端</p>
      <div>
        <span class="iconfont icon-svg45-copy">⑧</span>
        <el-button type="info">退出系统</el-button>
      </div>
    </el-header>

    <!-- 标题区域 -->
    <el-row class="title">
      <el-col :span="24">
        <div>运输管理-在途跟踪</div>
      </el-col>
    </el-row>

    <!-- 搜索区域 -->
    <el-row :gutter="20" class="search">
      <!-- 人员筛选 -->
      <el-col :span="6">
        <div class="personnel_sel">
          <el-row :gutter="5">
            <!-- 下拉选择框 -->
            <el-col :span="10">
              <el-select v-model="value_per">
                <el-option v-for="item in options_per" :key="item.value_per" :label="item.label_per" :value="item.value_per">
                </el-option>
              </el-select>
            </el-col>

            <!-- 输入框 -->
            <el-col :span="14">
              <el-input v-model="input_per" clearable> </el-input>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 日期筛选 -->
      <el-col :span="7">
        <div class="date_select">
          <el-row :gutter="5">
            <!-- 下拉选择框 -->
            <el-col :span="6">
              <el-select v-model="value_date">
                <el-option v-for="item in options_date" :key="item.value_date" :label="item.label_date" :value="item.value_date">
                </el-option>
              </el-select>
            </el-col>

            <!-- 日期选择框 -->
            <el-col :span="10">
              <el-date-picker v-model="date_sel" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                style="width: 180%">
              </el-date-picker>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <!-- 搜索按钮 -->
      <el-col :span="2">
        <el-button type="success">搜索</el-button>
      </el-col>
    </el-row>

    <!-- 筛选按钮组
    <el-row class="but_group">
      <el-button-group>
        <el-button type="info">全部(113)</el-button>
        <el-button type="info">待提货(5)</el-button>
        <el-button type="info">运输中(5)</el-button>
        <el-button type="info">已抵达(8)</el-button>
        <el-button type="info">异常(0)</el-button>
      </el-button-group>
    </el-row> -->

    <!-- 表格区域 -->
    <el-tabs v-model="activeName" type="card">
      <!-- 查看 -->
      <el-row>
        <el-col :span="24" class="checkOrder">
          <el-button @click="handleCheckOrder" type="primary">查看</el-button>
        </el-col>
      </el-row>
      <el-tab-pane label="全部（10）" name="first">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="take_goods" label="收货方" align="center"></el-table-column>
          <el-table-column prop="plan_start_time" label="计划发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="plan_end_time" label="计划到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="actual_start_time" label="实际发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="actual_end_time" label="实际到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="contral_status" label="监控状态" align="center"></el-table-column>
          <el-table-column prop="working_status" label="运作状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待发车（5）" name="second">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="take_goods" label="收货方" align="center"></el-table-column>
          <el-table-column prop="plan_start_time" label="计划发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="plan_end_time" label="计划到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="actual_start_time" label="实际发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="actual_end_time" label="实际到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="contral_status" label="监控状态" align="center"></el-table-column>
          <el-table-column prop="working_status" label="运作状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="运输中（3）" name="third">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="take_goods" label="收货方" align="center"></el-table-column>
          <el-table-column prop="plan_start_time" label="计划发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="plan_end_time" label="计划到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="actual_start_time" label="实际发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="actual_end_time" label="实际到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="contral_status" label="监控状态" align="center"></el-table-column>
          <el-table-column prop="working_status" label="运作状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已抵达（2）" name="forth">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="take_goods" label="收货方" align="center"></el-table-column>
          <el-table-column prop="plan_start_time" label="计划发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="plan_end_time" label="计划到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="actual_start_time" label="实际发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="actual_end_time" label="实际到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="contral_status" label="监控状态" align="center"></el-table-column>
          <el-table-column prop="working_status" label="运作状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已收货（6）" name="fifth">
        <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
          <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
          <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
          <el-table-column prop="order_time" label="下单时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
          <el-table-column prop="take_goods" label="收货方" align="center"></el-table-column>
          <el-table-column prop="plan_start_time" label="计划发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="plan_end_time" label="计划到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
          <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
          <el-table-column prop="actual_start_time" label="实际发车时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="actual_end_time" label="实际到达时间" width="110px" align="center"></el-table-column>
          <el-table-column prop="contral_status" label="监控状态" align="center"></el-table-column>
          <el-table-column prop="working_status" label="运作状态" align="center"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- <el-table :data="table_Data" border :header-cell-style="{ background: '#d3dce6', color: '#333' }">
      <el-table-column prop="sel" label="选择" type="selection"></el-table-column>
      <el-table-column prop="order_num" label="订单号" align="center"></el-table-column>
      <el-table-column prop="order_time" label="下单时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="waybill_num" label="运单号" align="center"></el-table-column>
      <el-table-column prop="take_goods" label="收货方" align="center"></el-table-column>
      <el-table-column prop="plan_start_time" label="计划发车时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="plan_end_time" label="计划到达时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="origin" label="始发地" align="center"></el-table-column>
      <el-table-column prop="destination" label="目的地" align="center"></el-table-column>
      <el-table-column prop="actual_start_time" label="实际发车时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="actual_end_time" label="实际到达时间" width="110px" align="center"></el-table-column>
      <el-table-column prop="contral_status" label="监控状态" align="center"></el-table-column>
      <el-table-column prop="working_status" label="运作状态" align="center"></el-table-column>
    </el-table> -->

    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[1, 5, 10, 20]"
      :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      // 人员选项
      options_per: [
        {
          value_per: "选项1",
          label_per: "收货人",
        },
        {
          value_per: "选项2",
          label_per: "始发地",
        },
        {
          value_per: "选项3",
          label_per: "目的地",
        },
        {
          value_per: "选项4",
          label_per: "订单号",
        },
        {
          value_per: "选项5",
          label_per: "运单号",
        },
        {
          value_per: "选项6",
          label_per: "货号",
        },
        {
          value_per: "选项7",
          label_per: "合同编号",
        },
      ],
      // 默认展示人员选项
      value_per: "收货人",
      // 人员输入框
      input_per: "",
      // 时间选项
      options_date: [
        {
          value_date: "选项1",
          label_date: "下单时间",
        },
        {
          value_date: "选项2",
          label_date: "收货有效期",
        },
      ],
      // 默认展示时间类型
      value_date: "下单时间",
      // 日期选择器
      date_sel: "",
      // 表格数据
      table_Data: [
        {
          sel: "", // 选择
          order_num: "XL00000001", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "--", // 运单号
          take_goods: "天津科技公司", // 收货方
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "青岛市", // 始发地
          destination: "天津市", // 目的地
          actual_start_time: "--", // 实际发车时间
          actual_end_time: "--", // 实际到达时间
          contral_status: "--", // 监控状态
          working_status: "待发车", // 运作状态
        },
        {
          sel: "", // 选择
          order_num: "XL00000002", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "XL00000011-a", // 运单号
          take_goods: "南宁科技公司", // 收货方
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "上海市", // 始发地
          destination: "南宁市", // 目的地
          actual_start_time: "2017/09/10 09:12:59", // 实际发车时间
          actual_end_time: "2017/09/10 09:12:59", // 实际到达时间
          contral_status: "正常", // 监控状态
          working_status: "运输中", // 运作状态
        },
        {
          sel: "", // 选择
          order_num: "XL00000088", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "XL00000018-a", // 运单号
          take_goods: "赣州科技公司", // 收货方
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "广州市", // 始发地
          destination: "赣州市", // 目的地
          actual_start_time: "2017/09/10 09:12:59", // 实际发车时间
          actual_end_time: "2017/09/10 09:12:59", // 实际到达时间
          contral_status: "到货晚点", // 监控状态
          working_status: "已抵达", // 运作状态
        },
        {
          sel: "", // 选择
          order_num: "XL00000024", // 订单号
          order_time: "2017/09/10 09:12:59", // 下单时间
          waybill_num: "XL00000024-a", // 运单号
          take_goods: "天津农业", // 收货方
          plan_start_time: "2017/09/10 09:12:59", // 计划发车时间
          plan_end_time: "2017/09/10 09:12:59", // 计划到达时间
          origin: "青岛市", // 始发地
          destination: "天津市", // 目的地
          actual_start_time: "", // 实际发车时间
          actual_end_time: "", // 实际到达时间
          contral_status: "发车晚点", // 监控状态
          working_status: "已收获", // 运作状态
        },
        {
          sel: "", // 选择
          order_num: "", // 订单号
          order_time: "", // 下单时间
          waybill_num: "", // 运单号
          take_goods: "", // 收货方
          plan_start_time: "", // 计划发车时间
          plan_end_time: "", // 计划到达时间
          origin: "", // 始发地
          destination: "", // 目的地
          actual_start_time: "", // 实际发车时间
          actual_end_time: "", // 实际到达时间
          contral_status: "异常", // 监控状态
          working_status: "", // 运作状态
        },
      ],
      // tab 标签默认打开页面
      activeName: "first",
      pagenum: 1, // 当前页码值
      pagesize: 20, // 默认每页显示几条数据
      total: 200, // 总数据条数
    };
  },

  methods: {
    // 点击按钮跳转查看订单详情页
    handleCheckOrder() {
      this.$router.push("/client/orderform");
    },
    // 监听 每页显示条数 改变的事件
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.el-header {
  background-color: #99a9bf;
  color: #333;
  font-size: 24px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  div {
    span {
      margin: 30px;
      font-size: 28px;
    }
  }
}

.title {
  height: 30px;
  background-color: #d3dce6;
  line-height: 30px;
  margin-bottom: 5px;
  div {
    text-align: left;
    margin-left: 5px;
  }
}

.search {
  margin-bottom: 5px;
  el-button {
    height: 10px;
  }
}
.but_group {
  // margin-left: -1150px;
  margin-bottom: 5px;
  text-align-last: left;
}

.checkOrder {
  margin-bottom: 5px;
  text-align-last: left;
}

/deep/.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  background-color: #b3c0d1;
  border-radius: 3px;
  // border: 1px solid #b3c0d1;
}

/deep/.el-tabs__item:hover {
  cursor: pointer;
  background-color: #c8cfd8bb;
  color: black;
}
/deep/.el-tabs__item.is-active {
  color: black;
  background-color: #c8cfd8bb;
}
</style>